<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登录界面</title>
		<link rel="stylesheet" href="css/style.css" />
		<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="js/axios.js" type="text/javascript" charset="utf-8"></script>
		<!-- jquery -->
		<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
		<!-- jQuery Cookie 插件在线地址用于方便获取cookie的值 -->
		<!-- <script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js"></script> -->
		<script src="js/jquery-cookie.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var isOff = true;

			function swimg() {
				const sw = document.getElementById("view");
				const txt = document.getElementById("password");
				if (isOff) {
					sw.src = "img/view.png";
					txt.type = "number";
					isOff = false;
				} else {
					sw.src = "img/view_off.png";
					txt.type = "password";
					isOff = true;
				}
			}
		</script>

	</head>
	<body>
		<div id="bigBox">
			<h2>登录</h2>
			<div class="inputBox">
				<div class="inputText">
					<img class="password-img" src="img/confirmPassword.png" />
					<input type="text" name="user" v-model="inputName" maxlength="10" placehoder="请输入账号">
				</div>
				<div class="inputText">
					<img class="password-img" src="img/password.png" />
					<img class="view" id="view" src="img/view_off.png" onclick="swimg()" />
					<input type="password" id="password" v-model="inputPasw" maxlength="16" placehoder="请输入密码">
				</div>
				<input type="button" value='登录' @click="login" class="inputButton">
				<br />
				<span><a href="register.html">没有账号?马上注册</a></span>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var app = new Vue({
			el: '#bigBox',
			data: {
				inputName: '',
				inputPasw: '',

			},
			methods: {
				login: function() {
					//登录操作
					axios.get('php/doLogin.php', {
						params: {
							user: this.inputName,
							password: this.inputPasw,
						}
					}).then(rsponse => {
						if (rsponse.data == '1') {
							window.location.href = 'index.html';
						} else {
							alert('用户名或密码错误');
						}
					})
				}
			}
		})
	</script>
</html>
